<template>
    <section class="search-val-main base-main">
      <!--搜索栏-->
      <div class="search-box">
        <form action="/">
          <van-search
            placeholder="输入商品名称"
            show-action
            v-model="value"
          >
            <div slot="action" @click="onSearch">搜索</div>
          </van-search>
        </form>
      </div>
      <!--搜索栏-->

      <!--搜索记录-->
      <div class="search-history" v-if="historyList.length > 1">
        <p class="title">
          搜索记录
        </p>
        <ul class="history-box bgcFFF">
          <li v-for="(item, index) in historyList" @click="handleSearch(item.text)">
            {{item.text}}
            <i class="iconfont iconcha" @click="handleDelHistory(index)"></i>
            <!--<van-icon name="close" />-->
          </li>
        </ul>
        <p class="clear-all text-c" @click="handleClearAll" >
          清除搜索历史
        </p>
      </div>
      <!--搜索记录-->
    </section>
</template>

<script type="text/ecmascript-6">

    export default {
      data() {
        return {
          value: '',
          historyList:[
            {text:'按摩椅1'},
            {text:'按摩椅2'},
            {text:'按摩椅3'},
            {text:'按摩椅4'},
            {text:'按摩椅5'},
            {text:'按摩椅6'}
          ]
        }
      },
      methods: {
        onSearch(){
          console.log('onSearch--',this.value);
          this.$router.replace({
            path:'/index/web/result',
            query:{
              text:this.value,
            }
          })
        },
        handleSearch(val){
          this.$router.replace({
            path:'/index/web/result',
            query:{
              text:val,
            }
          })
        },
        //删除单条记录
        handleDelHistory(index){
          this.$dialog.confirm({
            title: '删除',
            message: '确定删除此条记录？'
          }).then(() => {
            this.historyList.splice(index,1);
            this.$toast.success('删除成功');

          }).catch(() => {
//            console.log('cancel');
            // on cancel
          });
        },
        //删除所有记录
        handleClearAll(){
          this.$dialog.confirm({
            title: '删除',
            message: '确定删除所有记录？'
          }).then(() => {
            this.historyList = [];
            this.$toast.success('删除成功');

          }).catch(() => {
//            console.log('cancel');
            // on cancel
          });
        }
      },
    }
</script>

<style lang="scss">
  @import "../../assets/css/search.scss";
</style>
